<template>
  <div class="page-help">
    <Menu :active-name="activeName" mode="horizontal" @on-select="selectMenu">
      <MenuItem name="plat">K8S平台</MenuItem>
      <MenuItem name="database">数据库</MenuItem>
    </Menu>
    <div class="body-help">
      <router-view></router-view>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      activeName: 'plat'
    }
  },
  mounted() {
    this.$router.push('/home/help/' + this.activeName)
  },
  methods: {
    selectMenu(index) {
      this.$router.push('/home/help/' + index)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.page-help {
  margin: auto;
  position: absolute;
  left: 20px;
  top: 80px;
  right: 20px;
  bottom: 30px;
  overflow: hidden;
  .body-help {
    margin: auto;
    position: absolute;
    left: 0;
    top: 60px;
    right: 0;
    bottom: 0;
    overflow: auto;
  }
}
.page-help /deep/ {
  .panel {
    padding: 10px 20px;
  }
  p {
    text-indent: 2em;
    color: #333;
  }
  .title-h3 {
    background-color: #f5f5f5;
    font-size: 16px;
    padding: 6px 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-weight: bold;
    .ivu-icon {
      float: right;
      margin-top: 4px;
    }
  }
  .title-h4 {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 3px 0;
    color: #333;
  }
  .panel-item {
    h4,
    p {
      display: block;
    }
    pre {
      background-color: #f6f8fa;
      border-radius: 3px;
      line-height: 1.45;
      overflow: auto;
      padding: 6px 15px;
      margin: 6px 0;
      word-wrap: normal;
      white-space: normal;
      p {
        text-indent: 0;
        margin: 5px 0;
      }
    }
    img {
      margin: 5px 0 5px 2em;
      &.img-full {
        width: 100%;
        margin: 0;
      }
      &.img-lg {
        height: 500px;
      }
      &.img-md {
        height: 350px;
      }
      &.img-sm {
        height: 200px;
      }
      &.img-xs {
        height: 100px;
      }
    }
    .ivu-icon {
      cursor: pointer;
      transition: all 0.3s ease;
      transform: rotate(0);
    }
    &.collapse {
      h4,
      p,
      pre,
      img {
        display: none;
      }
      .ivu-icon {
        transform: rotate(180deg);
      }
    }
  }
  .panel-link {
    padding: 10px 15px;
    li {
      list-style: disc;
      li {
        margin-left: 15px;
      }
      a {
        display: block;
        line-height: 1.8;
      }
    }
  }
}
</style>
